<script lang="ts" setup name="lai-dialog">
import { nextTick, ref, watch } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "../ProTable/interface";
import { Search } from "@element-plus/icons-vue";
import { useDebounceFn } from "@vueuse/core";
const proTableRef = ref<ProTableInstance>();
const searchKw = ref<string | number>("");
interface DialogProps {
  isShow?: boolean;
  title: string;
  api?: (params: any) => Promise<any>;
  columns: any[];
  selTags?: { id: number; name: string }[];
  searchVal?: string | number;
  idName?: string;
  apiParams?: {};
}

const dialogProps = ref<DialogProps>({
  isShow: false,
  title: "",
  columns: []
});

interface Emits {
  (
    name: "selectedList",
    value: {
      list: any[];
      title: string;
    }
  ): void;
}
const emits = defineEmits<Emits>();

const acceptParams = (params: DialogProps) => {
  dialogProps.value = params;
  dialogProps.value.isShow = true;
  getTableData();
};
const tags = ref<any[]>([]);
const changeSelection = (selection: any[]) => {
  tags.value = selection;
};

const onSubmit = () => {
  emits("selectedList", {
    list: tags.value,
    title: dialogProps.value.title
  });
  dialogProps.value.isShow = false;
  // 搜索的 内容
  searchKw.value = "";
};

watch(
  () => dialogProps.value.isShow,
  newValue => {
    if (!newValue) {
      tags.value = [];
      proTableRef.value!.element!.clearSelection();
    }
  }
);

const tableData = ref<any[]>([]);
const getTableData = () => {
  tableData.value = [];
  dialogProps.value!.api!({
    // name: searchKw.value,
    pageNum: 1,
    pageSize: 9999,
    [dialogProps.value.idName]: searchKw.value,
    ...dialogProps.value.apiParams
  })
    .then(res => {
      // 处理数据
      tableData.value = JSON.parse(JSON.stringify(res.data.list)) ?? [];
      nextTick(() => {
        tableData.value.forEach((e: any) => {
          dialogProps.value.selTags?.forEach(v => {
            if (e.id === v.id) {
              proTableRef.value!.element!.toggleRowSelection(e, true);
            }
          });
        });
      });
    })
    .catch(() => {
      tableData.value = [];
    });
};

const searchInp = useDebounceFn(() => {
  getTableData();
}, 800);

defineExpose({ acceptParams });
</script>

<template>
  <div>
    <el-dialog v-model="dialogProps.isShow" :title="dialogProps.title" min-width="500">
      <div style="margin-top: -10px; margin-bottom: 10px">
        <el-input v-model="searchKw" placeholder="请输入" :prefix-icon="Search" @input="searchInp" />
      </div>
      <ProTable
        ref="proTableRef"
        :request-api="dialogProps.api"
        :columns="dialogProps.columns"
        :height="300"
        @selection-change="changeSelection"
        :pagination="false"
        :data="tableData"
      >
      </ProTable>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogProps.isShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
